<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
      layout:decorator="layout">
<head>
    <meta charset="UTF-8">
    <title th:text="${title}"></title>
</head>
<body>
<!-- Begin Page Content -->
<div class="container-fluid mt-4" layout:fragment="content">
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                搜索&添加
                <span id="operators_pack_btn" style="cursor: pointer"><i class="fas fa-angle-up"></i></span>
            </h6>
        </div>
        <div class="card-body" id="operators_panel">
            <!--<div id="operators_panel">-->
            <div class="row screen-group">
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 form-group">
                    <label>角色名：</label>
                    <input class="form-control" type="text" id="rolename1"/>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 form-group">
                    <label>描述：</label>
                    <input class="form-control" type="text" id="description1"/>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 form-group">

                </div>
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 form-group">
                    <button type="button" class="btn btn-secondary btn-block btn-bottom" name="add">新增</button>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 form-group">
                    <button type="button" class="btn btn-primary btn-block btn-bottom" id="searchBt">搜索</button>
                </div>
            </div>
        </div>
    </div>

    <!--数据-->
    <!-- DataTales Example -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                数据
                <!--<a href="#" style="float:right;font-weight: normal;">下载</a>-->
                <button type="button" class="btn btn-link" style="float:right;font-weight: normal;display: none;">下载</button>
            </h6>

        </div>
        <div class="card-body">
            <div class="table-responsive" id="data">
            </div>
        </div>
    </div>

    <div class="modal fade" id="getExamine" tabindex="-1" role="dialog" aria-labelledby="menu_examine_lable"  aria-hidden="true" style="z-index: 1051;overflow:auto;overflow-y:scroll;">
        <div class="modal-dialog" style="z-index: 1051">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="menu_examine_lable">角色编辑</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="menuClasify-detailed" data-id='' data-restaurantId="">
                        <form class="form-horizontal">
                            <input id="postUrl" type="hidden"/>
                            <input id="id" name="id" type="hidden"/>
                            <div class="form-group">
                                <label class="control-label">角色名：</label>
                                <input type="text" class="form-control" id="rolename" placeholder="" role="button" data-toggle="popover" data-placement="bottom" data-trigger="focus" data-content="">
                            </div>
                            <div class="form-group">
                                <label class="control-label">描述：</label>
                                <input type="text" class="form-control" id="description" placeholder="" role="button" data-toggle="popover" data-placement="bottom" data-trigger="focus" data-content="">
                            </div>
                            <div class="form-group" style="">
                                <label class="control-label">类型：</label>
                                <select  class="form-control" name="roletype" id="roletype">
                                    <!--<th:each items="${roleTypeList}" var="roleType">-->
                                        <option th:each="roleType:${roleTypeList}" th:value="${roleType.code}" th:text="${roleType.description}"></option>
                                    <!--</th:each>-->
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="control-label">权限：</label>
                                <div class="input-group">
                                    <select  class="form-control"
                                             name="auths" id="auths"  multiple="multiple" style="height: 500px;">
                                    </select>
                                    <span class="input-group-btn">
                                      <div><button class="btn btn-default" type="button" id="remove">移除</button></div>
                                      <div><button class="btn btn-default" type="button" id="rtSelect">选择</button></div>
                                  </span>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary preserve-btn" id="save">保存</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade bs-example-modal-lg" id="authSelectList"  tabindex="-1" role="dialog" style="z-index: 1052">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="dinging_lable">权限选择</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body" style="height: 600px;">
                    <iframe  th:src="@{/system/role/authList}" scrolling="yes" width="100%" height="100%" id="authListIframe"></iframe>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary preserve-btn" id="submitAuth">确定</button>
                </div>
            </div>
        </div>
    </div>


</div>

<th:block layout:fragment="js">
    <script type="text/javascript">
        var authlist;
        // var csrfToken = $("meta[name='_csrf']").attr("content");
        $(function(){
            $("#operators_pack_btn").click(function () {
                if ($("#operators_panel").is(":hidden")) {
                    $("#operators_panel").show(100);
                    $(this).html("<i class=\"fas fa-angle-up\"></i>");
                } else {
                    $("#operators_panel").hide(100);
                    $(this).html("<i class=\"fas fa-angle-down\"></i>");
                }
            });
            $("#searchBt").click(function(){
                search();
            });
            $("#description1 ").keyEnterEvent(search);
            $("#rolename1").keyEnterEvent(search);

            $("#save").click(function(){
                var url = $("#postUrl").val();
                var id=$("#id").val();
                var rolename=$("#rolename").val();
                var description=$("#description").val();
                var roletype= $("#roletype").val();
                var authstr="";
                if($("#auths option").length>0) {
                    for(var i=0;i<$("#auths option").length;i++) {
                        authstr+=$($("#auths option")[i]).val()+"#";
                    }
                }
                if(authstr==""){
                    alert("权限不能为空");
                    return;
                }
                $.doSubmit({
                    type: "POST",
                    submitUrl: url,
                    data: {id:id,rolename:rolename,description:description,authstr:authstr,roletype:roletype,_csrf:csrfToken},
                    //beforeSend: validateData,
                    callBack: function(response){
                        var data= $.parseJSON(response);
                        if(!data.ok)
                            alert(data.msg);
                        else {
                            search();
                            $("#getExamine").modal("hide");
                        }
                    },
                    webContext:webContext
                });
            });


            $("button[name='add']").click(function(){
                $("#menu_examine_lable").text("角色增加");
                $("#postUrl").val("[[@{/system/role/add}]]");
                $("#id").val("-1");
                $("#id-group").hide();
                $("#rolename").val("");
                $("#description").val("");
                $("#roletype").val("0");
                $("#auths").html("");
                $("#getExamine").modal("show");
            });
            $("#rtSelect").click(function(){
                authlist = $("#auths option");
                $("#authListIframe")[0].contentWindow.getSelect(authlist);
                $("#authSelectList").modal("show");
            });
            $("#remove").click(function () {
                $("#auths option:selected").remove();
            });

            search();

            $("#submitAuth").click(function(){
                $("#authListIframe")[0].contentWindow.saveAuth();
                $("#authSelectList").modal("hide");

            });
        });

        function hasAuth(id){
            var saveauth=$("#auths option");
            for(i=0;i<as.length;i++){
                if($(saveauth[i]).val()==id) {
                    return true;
                }
            }
            return false;
        }

        function selectAuths(auths){
            var as=$("#auths");
            console.info("old length:"+as.length);
            console.info("new length:"+auths.length);
            as.html("");
            if(auths==null){
                return;
            }
            for(var i=0;i<auths.length;i++){
                //auths分为原来的和新添加的
                if(typeof(auths[i].value)!="undefined"){
                    $("#auths").append("<option value="+auths[i].value+">"+$(auths[i]).html()+"</option>");
                }
                if(typeof(auths[i].authId)!="undefined"){
                    console.info("id:"+auths[i].authId);
                    $("#auths").append("<option value="+auths[i].authId+">"+auths[i].authName+"</option>");
                }
            }
        }

        function removeAuth(id){
            var as=$("#auths option");
            for(i=0;i<as.length;i++){
                if($(as[i]).val()==id) {
                    as[i].remove();
                    return;
                }
            }
        }

        function search(){
            var data={
                rolename:$("#rolename1").val(),
                delmark:0,
                description:$("#description1").val(),
                _csrf:csrfToken
            };
            $("#data").datagrid("load",{
                url:webContext+"system/role/search",
                data:data,
                showDetail:true,
                colResizeEnable:true,
                fields:[
                    // {name:"id",autoHidden:true,text:"ID",inTable:false},
                    {name:"rolename",autoHidden:false,text:"角色名",inTable:true},
                    {name:"description",autoHidden:false,text:"描述",inTable:true},
                    {name:"auths",autoHidden:true,text:"权限",inTable:false,render:function(row){
                            if(row.auths != null) {
                                var temp="";
                                for(var i=0;i<row.auths.length;i++){
                                    //temp+=row.auths[i].authname+"-"+row.auths[i].description+"<br/>";
                                    temp+=row.auths[i].authname+"("+row.auths[i].description+")<br/>";
                                }
                                return temp;
                            }else{
                                return "没有设置权限";
                            }
                        }
                    }
                ],
                dialogTitle:"角色详情",
                operations:[
                    {name:"edit",text:"编辑",autoHidden:false,handler:function(row){
                            $("#id").val(row.id);
                            $("#menu_examine_lable").text("角色编辑");
                            $("#postUrl").val("[[@{/}]]system/role/modify");
                            $("#id-group").show();
                            $("#rolename").val(row.rolename);
                            $("#description").val(row.description);
                            $("#roletype").val(row.roletype);
                            if(row.auths != null) {
                                var temp;
                                for(i=0;i<row.auths.length;i++){
                                    //temp+="<option value="+row.auths[i].id+","+row.auths[i].authname+">"+row.auths[i].authname+"</option>";
                                    temp+="<option value="+row.auths[i].id+">"+row.auths[i].authname+"("+row.auths[i].description+")</option>";
                                }
                                $("#auths").html(temp);

                            }else{
                                $("#auths").val("没有设置权限");
//                            return "没有设置权限";
                            }


                            $("#getExamine").modal("show");
                        }},
                    {name:"remove",text:"删除",autoHidden:true,inTable:false,handler:function(row){

                            var pp=prompt("确定要删除【"+row.rolename+"】吗？请输入‘确定’","");
                            window.focus=null;

                            if(pp != null){
                                if(pp=="确定"){
                                    del(row.id);
                                }else{
                                    alert("输入错误！");
                                }
                            }
                        }}
                ],
                webContext:webContext
            });
        }

        function del(id){

            $.doSubmit({
                submitUrl:webContext+"system/role/delete",
                data:{roleId:id,_csrf:csrfToken},
                type:"post",
                callBack:function(response){
                    var response= $.parseJSON(response);
                    if(response.ok){
                        search();
                    }else{
                        alert(response.msg);
                    }
                },
                webContext:'[[@{/}]]'
            });
        }
    </script>
</th:block>
</body>
</html>